var datalist = []
$(document).ready(() => {
    handleGetPracticeDetail()
})
$(function () {


});
// let examinationPaper =(data)=> `
//          <div>
//              <div style="padding: 20px 10px;border-bottom: 1px solid #010101">
//                 答卷详情
//             </div>
//             <div class="layer-me">
//             <div>
//             <div>最终得分:</div>
//             <div>练习时间:</div>
//             </div>
//             <div></div><div></div><div></div>
//             </div>
//         </div>
//     `
let examinationPaper = (data) => {
    let html = `<div>
                 <div style="padding: 20px 10px;border-bottom: 1px solid #010101">
                    答卷详情
                 </div>
                 </div>
                 <div style="display: flex;align-items: center;justify-content: space-between;padding: 10px">
                 <div>最终得分：${JSON.parse(data).score}</div><div>练习时间：</div>
                </div>
<div class="layer-me" style="padding: 10px">`;
    JSON.parse(data).single.forEach((item, index) => {
        html += `<div style="padding: 10px">
                   <p>${index + 1}. ${item.topicContent}</p>
                   <div style="display: flex;flex-direction: column">
                      ${item.options.split(';;').map((option, optIndex) => {
            let className = '';
            if (option.trim().split('、')[0] === item.rightKey) {
                className = 'correct-answer'; // 正确答案的类名
            } else if (option.trim().split('、')[0] === item.option && option.trim().split('、')[0] !== item.rightKey) {
                className = 'wrong-answer'; // 用户答案且错误的类名
            }
            return `<span class="${className}" style="padding: 10px;">${option}</span>`;
        }).join('')}
                   </div>
                </div>`;
    });
// 再处理多选题
    JSON.parse(data).multiple.forEach((item, index) => {
        html += buildQuestion(item, index + JSON.parse(data).single.length, 'multiple');
    });
// 新增：处理判断题
    JSON.parse(data).judge.forEach((item, index) => {
        html += buildQuestion(item, index + JSON.parse(data).single.length + JSON.parse(data).multiple.length, 'judgment');
    });

    html += `</div></div>`;
    // 假设这里有CSS定义了.correct-answer和.wrong-answer的样式
    return html;
};
function buildQuestion(item, index, type) {
    let questionHtml = `<div style="padding: 10px">
                         <p>${index + 1}. ${item.topicContent}</p>
                         <div style="padding: 10px;display: flex;flex-direction: column">`;
 if(type === 'multiple'){
     let options = item.options.split(';;');
     let userOptionsSet = new Set(item.option.split(';')); // 使用Set便于检查
     let rightKeySet = new Set(item.rightKey.split('')); // 多选题正确答案也可能用分号分隔，这里简化处理假设正确答案是字符分割
     options.forEach((option, optIndex) => {
         let className = '';
         // 如果是正确答案
         if (rightKeySet.has(option.trim().split('、')[0])) {
             className = 'correct-answer'; // 显示为绿色
         }

         // 用户选择的选项，检查是否错误
         else if (userOptionsSet.has(option.trim().split('、')[0])) {
             className = 'wrong-answer'; // 显示为红色
         }
         questionHtml += `<span class="${className}" style="padding: 10px;">${option}</span>`;
     });
 }
    if (type === 'judgment') {
        let options = item.options.split(';;');
        let userOption = item.option; // 判断题的选项实际上就是用户选择的答案
        let correctOption = item.rightKey;

        options.forEach((option, optIndex) => {
            let className = option.trim().split('、')[0] === correctOption ? 'correct-answer' :
                (option.trim().split('、')[0] === userOption ? 'wrong-answer' : '');
            questionHtml += `<span class="${className}" style="padding: 10px;">${option}</span>`;
        });
    }
    questionHtml += '</div></div>';
    return questionHtml;
}
// let layerConfig = {
//     type: 1, // 类型，这里使用的是页面层
//     title: false, // 不显示标题栏
//     closeBtn: 0, // 不显示关闭按钮
//     area: ['30%','100%'], // 宽度占屏幕百分之四十
//     offset: 'r', // 弹出位置，右边
//     shade: 0.5, // 遮罩层透明度
//     shadeClose: true, // 点击遮罩关闭弹窗
//     content: examinationPaper // 弹窗内容容器
// };
let tmp = (data) => `
        <div class="content-box-item">
            <div class="title-box">
                <div class="left-name">${data.paperTitle}</div>
                <div class="left-time">练习时间：${data.latestPracticeTime}</div>
            </div>
            <div style="display: flex;line-height: 54px">
                <p style="margin-right: 20px">最终得分：<span style="font-size: 20px;color: #db001b">${data.score}</span></p>
                <input type="hidden" value="${data.id}" id="paperId">
                <i class="layui-icon" id="info" data-id="${data.id}" onclick="handleOpenDialog(this)" style="font-size: 30px;">&#xe602;</i>
            </div>
        </div>
    `

let handleOpenDialog = (element) => {
    let id = element.getAttribute('data-id');
    console.log('ssd', id);
    $.ajax({
        type: "GET",
        url: "/jzweb/eclassresource/getExamPaper",
        data: {
            practiceRecordId: id,
        },
        success: function (data) {
            console.log(data)
            // 弹出层配置
            var index = layer.open({
                type: 1, // 类型，这里使用的是页面层
                title: false, // 不显示标题栏
                closeBtn: 0, // 不显示关闭按钮
                area: ['30%', '100%'], // 宽度占屏幕百分之四十
                offset: 'r', // 弹出位置，右边
                shade: 0.5, // 遮罩层透明度
                shadeClose: true, // 点击遮罩关闭弹窗
                content: examinationPaper(JSON.stringify(data.data)) // 弹窗内容容器
            });
        }
    });
}
// $('#info').click(() => {
//     console.log('ssd')
//     // 弹出层配置
//     var index = layer.open(layerConfig);
//     // 设置弹出层高度占满屏幕
// })

let handleGetPracticeDetail = () => {
    $.ajax({
        type: "GET",
        url: "/jzweb/eclassresource/getPracticeDetail",
        data: {
            userId: sessionStorage.getItem('stuserId'),
            pageNum: 1,
            pageSize: 100,
        },
        success: function (data) {
            datalist = data.data.records
            for (let i = 0; i < datalist.length; i++) {
                let itemData = datalist[i]
                let contentItem = tmp(itemData)
                $('.content-box').append(contentItem)
            }
        }
    });
}